<template>
	<view class="recommend" @click.stop="shopDetail(param)">
		<img :src="param.list_img" />
		<view class="top">
			<text class="title font-bold">{{ param.title }}</text>
			<text class="originalPrice">{{ param.market_price }}/{{ param.unit }}</text>
			<text class="font-bold payment price">{{ param.price }}/{{ param.unit }}</text>
		</view>
		<view class="content">{{ param.describe }}</view>
		<view class="bottom">
			<img src="../static/image/order/icon_dzz@3x.png" />
			<text class="col-1D1E21">{{ param.distance ? param.distance : '未知' }}</text>
			<text class="returnCommission">返佣</text>
			<text class="returnCommission-price">￥{{ param.direct_return }}</text>
			<text class="btn" @click.stop='bayNow(param)'>立即购买</text>
			<text class="btn"  @click.stop='share(param)'>分享海报</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:['param'],
		data() {
			return {
				
			}
		},
		onLoad() {
		},
		methods: {
	        shopDetail:function(data){//商品详情
				this.$emit('shopDetail',data)
				console.log(data)
			},
			bayNow:function(data){//立即购买
				this.$emit('bayNow',data)
				console.log(data)
			},
			share:function(data){//分享海报
				this.$emit('share',data)
			}	
		}
	}

</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		box-sizing: border-box;
		font-size: 0.75rem;
	}
	.col-1D1E21{
		color: #1D1E21;
		padding-top: 0.5rem;
		line-height: 0.5rem;
	
		
	}
	.recommend{
		width: 92%;
		background-color:#fff ;
		margin: 1rem 4% 0;
		border: 1px solid #f0f0f0;
		border-radius:8px;
		overflow: hidden;
	}
	.recommend img{
		width: 100%;
		height: 8rem;
	}
	.top{
		padding: 0.5rem 5%;
	}
	.font-bold{
		font-weight: bold;
	}
	.title{
		font-size: 0.85rem;
		display: inline-block;
		width: 7rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.originalPrice{
	    text-decoration:line-through;
		color: #F0F0F0;
		font-size: 0.65rem;
		position: relative;
		top:0.15rem;
	}
	.price ,.originalPrice{
		float: right;
		margin-left: 0.5rem;
	}
	.payment{
		color:#FD6431;
	}
	.content{
		padding: 0.5rem 5%;
		color: #4E5366;
	}
	.bottom{
		padding: 0.5rem 5%;
	}
	.bottom img{
		margin-right: 0.25rem;
		width:1rem;
		height: 1rem;
	}
	.returnCommission{
		display: inline-block;
		border: 1px solid #FD6431;
		margin-left: 0.5rem;
		padding: 0.1rem 0.2rem;
		border-radius: 5px 0 0 5px ;
		color: #fff;
		background-color: #FD6431;
		position: relative;
		top:-0.15rem;
		font-size: 0.65rem;
		
	}
	.returnCommission-price{
		display: inline-block;
		border: 1px solid #FD6431;
		padding: 0.1rem 0.2rem;
		color: #FD6431;
		border-radius: 0 5px 5px 0 ;
		position: relative;
		top:-0.15rem;
		font-size: 0.65rem;
	}
	.btn{
		padding: 0.1rem 0.25rem;
		color:#FD6431;
		border: 1px solid #FD6431;
		position: relative;
		top:-0.1rem;
		border-radius: 50px;
		float: right;
		margin-left: 0.3rem;
	}
</style>
